import React from 'react'
import { View, Image } from 'react-native'
import { Lt, Color, Nav, Label, Jpp, ImagePt, Images, Button, Navigator, Dialog, Rlist, Jx } from "./_utils"
import { Net, NET_GET, NET_RI } from "./_net"
import { cTemp } from './_util';
import { cMe } from "./me/_me"
import { eApp } from './home/_home';

const c_strSigned = "今日已签到+5积分, 明天再来";
// 签到
export class PageSign extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            data : {
                score:Jpp.questionMark,
                looks:Jpp.questionMark,
                share:Jpp.questionMark,
                sign:1, 
            },
            invite: "",
        }

        // this.roleId = eRole.FANS;
        this.roleId = cTemp.getRoleId();

        this.onFresh = this.onFresh.bind(this);
        this.onSigin = this.onSigin.bind(this);
        this.onExchange = this.onExchange.bind(this);
        this.onBrowse = this.onBrowse.bind(this);
        this.onShare = this.onShare.bind(this);
        this.onInvite = this.onInvite.bind(this);
    }
    static navigationOptions = {
        ...Nav.options,
        headerTitle:"签到得积分",
    }
    // 获取积分
    fetScore(freshed){
        Net.request("score/myScore", null, freshed ? {freshed} : {NET_RI}).then(r=>{
            if(r.data){
                this.setState({data:r.data})
            }
        });
    }
    onFresh(didMount, freshed){
        this.fetScore(freshed);
    }
    // 是否签到
    onSigin(){
        Net.request("score/sign", null, {NET_GET, NET_RI}).then(r=>{
            Dialog.msg1(c_strSigned);
            this.fetScore(null);
        });
    }
    // 兑现
    onExchange(){
        Net.request("score/cash", null, {NET_RI}).then(r=>{
            if(r.data){
                Dialog.msg1("兑现完毕,可前往个人中心查看预估收入");
                this.fetScore(null);
            }else{
                Dialog.msg1("积分不足以兑现");
            }
        });
    }
    // 浏览商品
    onBrowse(){
        Navigator.push("Apps", {appIdx:eApp.rdxs[eApp.TB]});
    }
    // 每日分享
    onShare(){
        this.onInvite();
    }
    // 邀请好友
    onInvite(){
        if(!cMe.fansMsg(this.roleId, "推广赚钱/邀请注册", this.props.navigation)){
            Navigator.push("Spread");
        }
    }
    render(){
        const {data, invite} = this.state;
        return <View style = {{flex:1,backgroundColor:Color.back}}>
            <Nav.StatusBar />
            <Rlist onFresh={this.onFresh}>
                <View>
                    <Image style = {{width:"100%",height:Jpp.width*ImagePt.qiandao_bg.r}} source = {Images.qiandao_bg} resizeMode = {"cover"}/>
                    <View style = {{position:"absolute", width:"100%",height:Jpp.width*ImagePt.qiandao_bg.r, justifyContent:"center", alignItems:"center"}}>
                        {
                            data.sign ? 
                            <Button.Pure title={"已签"} style = {{
                                width:60,height:60,borderRadius:30,fontSize:Lt.c20,fontWeight:"900",
                            }}/> : 
                            <Button.Pure title={"签到"} onPress={this.onSigin} style = {{
                                width:80,height:80,borderRadius:40,fontSize:27,fontWeight:"900",
                            }}/>
                        }
                        {
                            data.sign ? <Button.Border style={{width:200, marginTop:5}} title={c_strSigned}/> : null
                        }
                    </View>
                </View>
                <View style = {{marginVertical:Lt.margin, paddingHorizontal:Lt.pad, flexDirection:"row", justifyContent:"space-between", alignItems:"center"}}>
                    <View>
                        <Label style = {{fontSize:Lt.c18, color:Color.c3}}>当前积分: {data.score}</Label>
                        <Label style = {{color:Color.c9}}>100积分=1元</Label>
                        <Label style = {{color:Color.c9}}>满1000积分可兑现到佣金中提现</Label>
                    </View>
                    <Button.Pure title={"全部兑现"} onPress = {this.onExchange}/>
                </View>
                <View style = {{height:20, backgroundColor:Color.line}} />
                <View style = {{paddingHorizontal:Lt.margin}}>
                    <Label style = {{marginVertical:Lt.margin, fontSize:Lt.c18, color:Color.c3}}>做任务赚积分</Label>
                    <ViewLine/>
                    <ViewTask title={"每日浏览商品"} value={data.looks} valueTotal={10} credit={10} source={Images.liulan_qd} onPress={this.onBrowse}/>
                    <ViewLine/>
                    <ViewTask title={"每日分享App"} value={data.share} valueTotal={1} credit={5} source={Images.fenxiang_qd} onPress={this.onShare}/>
                    <ViewLine/>
                    <ViewTask title={"每邀请一位好友"} value={invite} credit={20} source={Images.yaoqing_qd} onPress={this.onInvite}/>
                </View>
                <View style = {{flex:1, backgroundColor:Color.line}} />
            </Rlist>
        </View>
    }
}
class ViewLine extends React.PureComponent{
    render(){
        return <View style = {{height:1, marginHorizontal:Lt.margin, backgroundColor:Color.line}} />;
    }
}
class ViewTask extends React.PureComponent{
    render(){
        let {title, value, valueTotal, source, credit, onPress} = this.props;
        return <View style = {{marginVertical:20}}>
            <View style = {{flexDirection:"row", alignItems:"center"}}>
                <Image source = {source}/>
                <View style = {{marginLeft:5}}>
                    <Label style = {{fontSize:Lt.c16, color:Color.c3}}>{title}</Label>
                    {
                        valueTotal ? 
                        <Label style = {{fontSize:Lt.c16, color:Color.c9}}>{"已完成 "}
                            <Label style = {{fontSize:Lt.c16, color:Color.theme}}>{value}</Label>
                            {"/" + valueTotal}
                        </Label> : null
                    }
                </View>
            </View>
            <View style = {{position:"absolute", width:"100%", flex:1, flexDirection:"row", justifyContent:"flex-end", alignItems:"center"}}>
                <Label style = {{marginRight:Lt.margin, fontSize:Lt.c16, color:Color.theme}}>+{credit} 积分</Label>
                <Button.Border title={"去完成"} onPress = {onPress}/>
            </View>
        </View>
    }
}